<template>
	<view class="page">
		<u-list @scrolltolower="scrolltolower">
			<u-list-item class="u-list-item" v-for="(item, index) in list">
			<view class="item flex mar-bottom30" @click='handleJump(item)'>
				<view class="pic-box mar-right14">
					<image :src="'https://www.worldintek.com:39011/yaolexue-service/'+item.imageDto.compressLink"></image>
				</view>
				<view class="flex_column justify-between flex1">
					<view class="cr-333 font_s30 ">{{item.albumName}}</view>
					<view class="state-icon self-end ">
						<image v-if="item.status==1" src="https://www.worldintek.com:39011/yaolexue-service/icon_dingyue.png" @click.stop="handleClickSubscribe(0,item)"></image>
						<image v-else  src="https://www.worldintek.com:39011/yaolexue-service/icon_dingyue_active.png" @click.stop="handleClickSubscribe(1,item)"></image>
					</view>
				</view>

			</view>
		</u-list-item>
    <u-empty
           
        v-if="showEmpty"
                mode="list"
        >
        </u-empty>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				limit:10,
				page:1,
				total:0,
        showEmpty:false
			};
		},
		onLoad(payload) {
			this.init()
		},
		methods:{
      handleJump(item){
        if(item.deleteStatus){
          uni.showToast({
            title:'内容已删除',
            icon:'none'
          })
          return
        }
        if(!item.publishStatus){
          uni.showToast({
            title:'内容已下架',
            icon:'none'
          })
          return
        }
        console.log(item)
        let url = ''
        switch(item.type){
        	case 2:
        		url = `/pages/AudioItemList/AudioItemList?id=${item.albumId}`
        	break;
        	case 3:
        		url = `/pages/VideoItemList/VideoItemList?id=${item.albumId}`
        	break;
        }
        uni.navigateTo({
        	url
        })
      },
			init(){
				this.reset()
				this.getSubsList(true)
			},
			reset(){
        this.showEmpty=false
				this.list=[]
				this.page=1
				this.total=0
			},
			getSubsList(init){
				if(init||this.total>this.list.length){
						return this.$http.get(
							`/yaolexue-service-portal/albumSubscribeRel/pageAlbumSubscribe`, {
								limit:this.limit,
								page:this.page,
							}, ).then(res=>{
								console.log(res);
								this.list=res.data.items.map(item=>{
									item.status=1
									return item
								})
								this.total=res.data.total
                if(this.total ===0)this.showEmpty=true
							})
				}
			},
			handleClickSubscribe(status,item){
				return this.$http.put(
					`/yaolexue-service-portal/contentItem/updateAlbumSubscribeStatus`, {
						albumId:item.albumId,
						subscribeStatus:status
					}, {
						isNeedLoading: true
					}).then(res=>{
						if(res.code===200){
							if(status==1){
								this.init()
							}else{
								//根据ui图，允许用户取消和订阅之间横跳，所以需要保存取消的订阅，改下订阅状态就ok，但不刷新数据，返回后失效
								const targetIndex=this.list.findIndex(ite=>ite.albumId===item.albumId);
								this.list.splice(targetIndex,1,{...item,status:0})
							}
						}
					})
			},
			scrolltolower() {
				this.page+=1
				this.getSubsList()
			},
		}
	}
</script>

<style lang="scss">
.page {
  padding: 41rpx 31rpx;
}
.item{
	.pic-box{
		flex: 0 0 220rpx;
		width: 220rpx;
height: 123rpx;
image{
	width: 100%;
	height: 100%;
}
	}
	.state-icon{
		width: 67rpx;
		height: 36rpx;
border-radius: 6rpx;
image{
	width: 100%;
	height: 100%;
}
	}
}
</style>
